<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水罐晃动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: rgb(20,19,19);
            display: flex;
            height: 100vh;
        }
        .bottle{
            margin: auto;
            width: 300px;
            height: 300px;
            background: #ffffff1a;
            border-radius: 50%;
            position: relative;
            animation: animate linear 3s infinite;
            transform-origin: bottom center;
        }
        .bottle::before{
            display: block;
            content: "";
            width: 150px;
            height: 60px;
            border-radius: 70%;
            background: #505250;
            position: absolute;
            left: 50%;
            top: -5px;
            transform: translate(-50%);
            box-shadow: 0 10px 5px #000;
        }
        .water{
            background: #41c1fb;
            position: absolute;
            left: 10px;
            top: 50%;
            right: 10px;
            bottom: 10px;
            border-bottom-left-radius: 150px;
            border-bottom-right-radius: 150px;
            animation: animates linear 3s infinite;
            transform-origin: top center;
            filter: drop-shadow(0 0 80px #41c1fb);
        }
        .water::before{
            display: block;
            content: "";
            width: 100%;
            height: 20px;
            background: #0da2e7;
            border-radius: 50%;
            position: absolute;
            top: -10px;
        }
        .bottle-bottom{
            margin: auto;
            position: absolute;
            left: 50%;
            top: calc(50% + 150px);
            width: 300px;
            height: 30px;
            background: rgba(0,0,0,0.5);
            transform: translate(-50%);
            border-radius: 50%;
            animation: shadow linear 3s infinite;
            z-index: -1;
        }
        @keyframes animate{
            0%{
                transform: rotate(0);
            }
            25%{
                transform: rotate(15deg);
            }
            50%{
                transform: rotate(0);
            }
            75%{
                transform: rotate(-15deg);
            }
            100%{
                transform: rotate(0);
                filter: hue-rotate(360deg);
            }
        }
        @keyframes animates{
            0%{
                transform: rotate(0);
            }
            25%{
                transform: rotate(-15deg);
            }
            50%{
                transform: rotate(0);
            }
            75%{
                transform: rotate(15deg);
            }
            100%{
                transform: rotate(0);
            }
        }
        @keyframes shadow{
            0%{
                transform: translate(-50%,0);
            }
            25%{
                transform: translate(calc(-50% - 10px),0);
            }
            50%{
                transform: translate(-50%,0);
            }
            75%{
                transform: translate(calc(-50% + 10px),0);
            }
            100%{
                transform: translate(-50%,0);
            }
        }
    </style>
</head>
<body>
    <div class="bottle">
        <div class="water"></div>
    </div>
    <div class="bottle-bottom"></div>
</body>
</html>